Form 表單

• <input>：說明 type 的單選與多選
  • radio：單選
    • 同一群要定義 name，value 回傳值
    • 描述可用 label，for="id"
    • 若要設定預勾選項，checked
  • checkbox：多選
    • 同一群要定義 name，value 回傳值
    • 幾選幾，要搭配 JS

<h2>你的性別</h2>
<input type="radio" name="sex" value="1" id="sex1"><label for="sex1">男</label>
<input type="radio" name="sex" value="2" id="sex2" checked><label for="sex2">女</label>

<h2>你的興趣</h2>
<input type="checkbox" name="hobby" value="1" id="hobby1"><label for="hobby1">讀書</label>
<input type="checkbox" name="hobby" value="2" id="hobby2"><label for="hobby2">看電影</label>
<input type="checkbox" name="hobby" value="3" id="hobby3"><label for="hobby3">運動</label>

• <select>：下拉選單，name 設定在這
  • <option>：內容選項，value 設定在這
  • 設定預設選項，selected
• <textarea>：多行輸入

<h2>年份</h2>
<label for="year">年份</label>
<select id="year" name="year">
    <option value="2020" selected>2020</option>
    <option value="2021">2021</option>
    <option value="2023">2022</option>
</select>
<br>
<h2>建議</h2>
<textarea name="content" id="" cols="30" rows="10"></textarea>
<br>
<input type="submit" value="送出">
<br>

Form 的 CSS 樣式

• border：外框
• color：字型的顏色
• border-radius：邊框圓角
• background-color：背景色
• padding：留白
• font-size：字型大小
• width：區塊的寬度
• cursor：滑鼠座標的樣式
• :hover：滑鼠移動過去的樣式

input {
    border: 3px solid red;
    color: white;
    border-radius: 5px;
    background-color: #000;
    padding: 5px 10px;
    font-size: 16px;
    width: 200px;
}

.btn {
    background: green;
    color: #fff;
    border: 1px solid red;
    border-radius: 5px;
    padding: 10px 30px;
    cursor: pointer;
}

.btn:hover {
    background-color: #000;
}

參考資料

• HTML 表單元件 - <input> 標籤 (tag)
• border-radius
• CSS 語法「cursor 屬性」改變滑鼠游標的形狀

次回

再回到說明 CSS